Day10-Html語意標籤

15th鐵人賽

cindy7020

2023-09-25 14:40:22

435 瀏覽

分享至

讓網路瀏覽器搜尋了解網頁中每個區塊的設計

`<header>`	標題標籤
`<nav>`	導航標籤
`<main>`	主要內容標籤
`<aside>`	側欄標籤
`<article>`	文章標籤
`<section>`	區塊標籤
`<footer>`	頁尾標籤

       <center>(圖片:自己做的)

`<main>`

放網頁主要內容，例如:導覽列、側邊欄、文章、頁尾等等

`<section>`

網頁引用的群組區塊，通常也會使用<h1> 至 <h6> 標籤，提供清晰內容組織，也可以用在其他語意標籤中，提供更複雜內容結構，例如導覽航、主要內容、側邊欄等等

`<article>`

重複使用的內容項目標籤，可以用在部落格、新聞和雜誌文章、論壇回覆、評論等等

`<aside>`

跟主內容沒有直接關聯的內容，例如:廣告、腳注、插圖等等

`<article>` `<section>` `<aside>`區別

標籤	區塊	h1~h6標題
`<article>`	重複使用內容	會使用一個標題
`<aside>`	無直接關聯內容	會使用一個標題
`<section>`	一般性內容	不一定

`<div>`

通用區塊標籤，可以建立任何類型的區塊，例如:段落、表格、圖像、按鈕等等，通常在CSS排版或 JavaScript事件處理，常常和CSS一起使用，設計不同排版效果

`<span>`

用在文字或其他元素組合在一起，搭配ID或CLASS屬性在裡面設定不同內容樣式，也沒有任何語意信息

`<footer>`

網頁或區塊結尾，通常包含版權信息、作者信息、聯繫信息等等

Html語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
      <div class="logo">
        <h1>Coffee</h1>
      </div>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Content</a></li>
          <li><a href="#">Message</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="backImage">
        <div class="filter"></div>
        <h1>Do you want to drink Coffee?</h1>
      </section>
    </main>

    <footer>
      <div class="logo">
        <img src="./coffee.png" alt="Logo" />
        <h1>By Cindy</h1>
      </div>
    </footer>
    
</body>
</html>